<template>
  <div v-if="isWz">
    <block-header :icon="icon" :title="titles"></block-header>
    <div v-for="(item,index) in sg" :key="index" style="backgroundColor:#FFFFFF">
    <details-group :title="item.mc" :title-border="true">
      <div class="data" v-for="(items,indexs) in item.rowArr" :key="indexs">
        <span>{{items.col_cn}} ：</span><span class="value">{{items.col_val}}</span>
      </div>
    </details-group>
    </div>
  </div>
  
  <div v-else>
    <block-header :icon="icon" :title="titles" @filter="filter" :isFilter="true">
      <div class="filter_box" slot="filterBox" v-if="isShowfilter">
        <div class="filter_time">时间区域</div>
        <div class="filter_btn">
          <mt-button size="small" class="filter_btns" @click="getTimes(7)">7天</mt-button>
          <mt-button size="small" class="filter_btns" @click="getTimes(30)">一个月</mt-button>
          <mt-button size="small" class="filter_btns" @click="getTimes(180)">半年</mt-button>
        </div>
        <div class="filter_date">
          <mt-field type="date" class="data_btn" v-model="start"></mt-field>
          <mt-field type="date" class="data_btn" v-model="end"></mt-field>
        </div>
        <footer>
          <div class="button" @click="reset">重置</div>
          <div class="button" @click="done">完成</div>
        </footer>
      </div>
    </block-header>
    <div v-for="(item,index) in wz" :key="index"  style="backgroundColor:#FFFFFF">
    <details-group :title="item.ddmc" :title-border="true">
      <div class="data" v-for="(items,indexs) in item.rowArr" :key="indexs">
        <span>{{items.col_cn}} ：</span><span class="value" >{{items.col_val}}</span>
      </div>
    </details-group>
    </div>
  </div>
</template>

<script>
  import BlockHeader from '../../components/block-header'
  import detailsGroup from '../../components/details-group'
  import date from '../../utils/date'

  export default {
    name: 'carbase',
    components: {
      BlockHeader,
      detailsGroup
    },
    props: {
      sg: {
        type: Array,
        default() {
          return []
        }
      },
      wz: {
        type: Array,
        default() {
          return []
        }
      },
      // 违章模板
      isWz: {
        type: Boolean,
        default: true
      },
      icon: '',
      titles: ''
    },
    mixins: [],
    computed: {},
    data() {
      return {
        isShowfilter: false,
        start: '',
        end: ''
      }
    },
    methods: {
      filter(start, end) {
        this.isShowfilter = this.isShowfilter !== true
        this.$emit('filter', start, end)
      },
      getTimes(time) {
        this.filter(date(new Date(), 'yyyyMMdd', {d: -time}), date(new Date(), 'yyyyMMdd', {d: 0}))
        this.isShowfilter = false
      },
      done() {
        this.filter(date(this.start, 'yyyyMMdd'), date(this.end, 'yyyyMMdd'))
        this.isShowfilter = false
      },
      reset() {
        this.start = ''
        this.end = ''
      }
    },
    filters: {
    },
    mounted() {
    },
    created() {
    }
  }
</script>

<style scoped>
.p-title {
  height: 2.5rem;
  line-height: 2.5rem;
  margin-left: 1.2rem;
  border-bottom: .5px solid #eee;
  margin-right: 1rem;
  font-size: 1.1rem;
  color: #0a0a0a;
 }
 .p-title:before {
  font-size: 1.3rem;
  font-weight: 600;
  color: #46A3E8;
  content: '|';
  margin-right: .5rem;
 }
 .p-border {
  border-bottom: 1px solid #ccc;
}
.key {
  margin-left: 2rem; 
  color: #656565;
  font-size: 1rem;
  width: 30%;
}
.value {
  color: #000;
  font-size: 1rem;
  height: 2rem;
  line-height: 2rem;
  margin-left: .2rem;
}
.ellipsis {
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.indent {
  margin-left: 2rem;
}
/*弹出*/
footer {
  display: flex;
  text-align: center;
}
.button {
  flex-grow: 1;
  color: #fff;
  background: rgba(255, 153, 51, 1);
  flex-basis: 0;
}
.button:first-child {
  margin-right: .2rem;
}
.filter_btn {
  display: flex;
  text-align: center;
}
.filter_btns {
  flex-grow: 1;
  flex-basis: 0;
  margin-left: 1rem;
  margin-bottom: 1rem
}
.filter_btns:last-child {
  margin-right: 1rem;
}
.filter_time {
  margin-left: 1rem;
}
.filter_date {
  display: flex;
  text-align: center;
}
.date_btn {
  flex-grow: 1;
  flex-basis: 0;
}
</style>
